.title_css_index{
    
    --nav-bar-background-color: none;
    --nav-bar-arrow-color: #fff;
    --nav-bar-text-color: #fff;
    --nav-bar-title-font-size: 18px;
    --nav-bar-title-text-color: #fff;
    --nav-bar-title-font-weight: 400;
}

.container {
    position: relative;
    width: 100%;
    height: 90vh;
}

// 添加水平布局样式
.horizontal_layout {
    display: flex;
    flex-direction: row;
}

.setting_background  {
    background-color: rgba(255, 255, 255, 0.268);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    position: absolute;
    width: 90%;
    height: 8%;
    margin-top: 10%;
    margin-left: 5%;
    display: flex;
    justify-content: flex-end; /* 让子元素靠右布局 */
    align-items: center; /* 垂直居中 */
}

/* 新增震动开关容器样式 */
.setting_vibrate {
  background-color: rgba(255, 255, 255, 0.268);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
  position: absolute;
  width: 90%;
  height: 8%;
  margin-top: calc(10% + 20%); /* 在声音开关下方，间隔 10px */
  margin-left: 5%;
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  // padding: 0 10px;
  justify-content: flex-end; /* 让子元素靠右布局 */
  align-items: center; /* 垂直居中 */
}

// ... existing code ...

.text_container {
    display: flex;
    flex-direction: row;
    justify-content: space-around; // 让文字均匀分布
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .text_item {
    // 可根据需求调整文字样式
    color: #000; 
    font-size: 16px;
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 溢出文本用省略号表示 */
  }
  
  // ... existing code ........switch............................
  .setting_switch {
    background-color: rgba(255, 255, 255, 0.268);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    position: absolute;
    width: 90%;
    height: 10%;
    margin-top: 95%;
    margin-left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* 添加内边距，避免元素紧贴容器边缘 */
    justify-content: space-between; /* 让子元素分别靠左右两侧 */
  }
  
  
.switch_wrapper {
    display: flex;
    flex-direction: row; /* 水平分布 */
    gap: 8px; /* 按键之间的间距，可按需调整 */
    margin-right: 10px; /* 添加负的右边距让*/
}
  
.switch {
    position: relative;
    width: 64px; /* 放大开关 */
    height: 32px; /* 放大开关 */
    background-color: #6d6c6c;
    border-radius: 12%;
    transition: background-color 0.4s;
    display: flex;
    align-items: center;
    // padding: 2; /* 移除内边距，让滑块能覆盖到边缘 */
    // // margin-top: 10px; /* 上移 10px */
    // margin-left:270px; /* 左移 20px */
    /* 移除固定的外边距，由父容器控制位置 */
    padding: 0; 
    margin: 0;
    
}


  
  .switchOn {
    background-color: #6c0bffe5; /* 紫色背景 */
  }
  
  .switchLine {
    position: absolute; /* 让竖线脱离文档流 */
    width: 1px;
    height: 15px;
    background-color: rgba(232, 232, 232, 0.792);
    transition: all 0.4s;

  }

  
.switchLine:first-child {
    left: 5px; /* 设置左侧竖线的位置 */
}

/* 为右侧竖线添加额外的右外边距 */
  .switchLine:last-child {
    right: 5px; /* 设置右侧竖线的位置 */
}
  
  .lineShrink {
    transform: scaleY(0); /* 缩小效果 */
    opacity: 0.5;
  }
  
  .lineGrow {
    transform: scaleY(1.5); /* 放大效果 */
    opacity: 1;
  }
  
  .switchSlider {
    width: 25.6px; /* 方形滑块 */
    height: 25.6px; /* 方形滑块 */
    background-color: rgba(247, 247, 247, 0.764);
    border-radius: 15%;
    transition: transform 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-left: 5%;
  }
  

// 计算滑块移动到最右边的距离,80px 是开关宽度,32px 是滑块宽度,2px 是竖线宽度 
.sliderOn {
    // transform: translateX(calc(80px - 32px - 2px - 4px)); 
      transform: translateX(calc(64px - 25.6px - 2px - 4.2px)); 
}

//sound
.sound_info {
    display: flex;
    flex-direction: row; /* 水平排列文本和图标 */
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 文本和图标间距 */
    margin-right: 50%;
}

.sound_icon {
    /* 可按需设置图标样式，如大小、颜色等 */
    width: 20px;
    height: 20px;
}

.sound_text {
    /* 可按需设置文本样式，如字体大小、颜色等 */
    font-size: 16px;
    color: #000000;
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 溢出文本用省略号表示 */
}


/* 新增震动信息样式 */
.vibrate_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-right: 40%;
}

/* 新增震动文本样式 */
.vibrate_text {
  font-size: 16px;
  color: #000000;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 溢出文本用省略号表示 */
}


/* 新增震动唤醒开关容器样式 */
.setting_vibration_wakeup {
  background-color: rgba(255, 255, 255, 0.268);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
  position: absolute;
  width: 90%;
  height: 8%;
  margin-top: calc(10% + 18% + 22%); /* 在震动开关下方，间隔 18% */
  margin-left: 5%;
  display: flex;
  justify-content: flex-end; /* 让子元素靠右布局 */
  align-items: center; /* 垂直居中 */
}


/* 新增震动唤醒信息样式 */
.vibration_wakeup_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-right: 40%;
}

/* 新增震动唤醒文本样式 */
.vibration_wakeup_text {
  font-size: 16px;
  color: #000000;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 溢出文本用省略号表示 */
}